<template>
  <div>
    <van-nav-bar
        title="支付页面"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <h2 style="text-align: center;">欢迎使用微信支付</h2>
    <div style="text-align: center;">订单号为：{{ trade }}</div>
    <canvas id="canvas" style="align-content: center; margin-left: 35%"></canvas>
    <div style="text-align: center;">请使用微信扫描二维码支付</div>
    <br>
  </div>
</template>

<script>
import Vue from "vue"
// 引入QRcode插件
import QRCode from "qrcode"
import axios from "axios";

Vue.use(QRCode)
export default {
  data() {
    return {
      trade: null,
      orderInfo: {}
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/shouye')
    },
    useqrcode(url) {
      var canvas = document.getElementById("canvas");
      QRCode.toCanvas(canvas, url, function (error) {
        if (error) {
        } else {
          console.log("success!");
        }
      });
    }
  },

  mounted() {
    this.orderInfo = this.$route.query
    let randomNumber = Math.floor(Math.random() * 1000000);
    this.trade = `ORDER${randomNumber}`
    this.orderInfo.orderNumber = this.trade
    var orderId = this.$route.query.id
    console.log(orderId)
    this.axios.get(`http://1.94.221.254:9999/api/qcfw-home/wxpay/getQrCodeUrl/${this.orderInfo.orderNumber}`).then((res) => {
      this.useqrcode(res.data.data);
    })
    //当检测到订单状态为success的时候，跳转到支付成功页面
    setTimeout(() => {
      this.axios.post(`http://1.94.221.254:9999/api/qcfw-home/wxpay/orderquery?id=${orderId}`, this.orderInfo).then((ress) => {
        if (ress.data == 'fail') {
          console.log("请求超时")
        }
        if (ress.data == 'fail') {
          console.log('请求失败')
        }
        if (ress.data == 'success') {
          console.log('请求成功')
          this.$router.push("/chenggong")
        }
      })
    }, 3000);
  }
}


</script>

<style scoped>

</style>
